<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 对象的继承
    // 1.原型链的继承 ，当前的对象只能访问当前的原型链的方法和属性
    function SuperFn() {
      this.a = [1, 2, 3, 4]
    }
    SuperFn.prototype.sayHi = function () {
      console.log('say hello~~')
    }

    function Fn() { }

    // 想要拥有superFn()的方法和属性
    Fn.prototype = new SuperFn()
    Fn.prototype.constructor = Fn

    let fn1 = new Fn()
    let fn2 = new Fn()


    // 此时修改a 的值  ---出现共享问题 相互影响

    fn1.a.push(5)
    console.log(fn1.a)   //[1,2,3,4,5]
    console.log(fn2.a)    //[1,2,3,4,5]


    // 为解决上面的共享的问题---构造函数的方法，
    // function SuperFn() {
    //   this.a = [1, 2, 3, 4]
    // }
    // SuperFn.prototype.sayHi = function () {
    //   console.log('say hello~~')
    // }

    // function Fn() {
    //   // 将superFn的函数指向这个fn ,通过new 实例化，实例出不同的对象
    //   SuperFn.call(this)
    // }

    // let fn1 = new Fn()
    // let fn2 = new Fn()

    // // 此时修改a 的值  ---但是无法获得SuperFn上面的原型的方法

    // fn1.a.push(5)
    // console.log(fn1.a)   //[1,2,3,4,5]
    // console.log(fn2.a)    //[1,2,3,4]


    //为解决上面的问题---组合式继承（伪经典继承）
    // function SuperFn() {
    //   this.a = [1, 2, 3, 4]
    // }
    // SuperFn.prototype.sayHi = function () {
    //   console.log('say hello~~')
    // }

    // function Fn() {
    //   // 将superFn的函数指向这个fn ,通过new 实例化，实例出不同的对象
    //   SuperFn.call(this)
    // }

    // Fn.prototype = new SuperFn()  

    // let fn1 = new Fn()
    // let fn2 = new Fn()

    // 此时修改a 的值  ---但是无法获得SuperFn上面的原型的方法

    // fn1.a.push(5)
    // console.log(fn1.a)   //[1,2,3,4,5]
    // console.log(fn2.a)    //[1,2,3,4]



  </script>

</body>

</html>